<script setup lang="ts"></script>

<template>
  <div class="users-page">
    <div class="user-header">
      <div class="header-top">
        <van-image
          round
          width="68px"
          height="68px"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
        <div class="user-name">
          <div class="name">用户6</div>
          <p><cp-icon name="user-edit"></cp-icon></p>
        </div>
      </div>
      <div class="header-bottom">
        <van-row>
          <van-col span="6">
            <p>0</p>
            <p>收藏</p>
          </van-col>
          <van-col span="6">
            <p>0</p>
            <p>关注</p>
          </van-col>
          <van-col span="6">
            <p>0</p>
            <p>积分</p>
          </van-col>
          <van-col span="6">
            <p>0</p>
            <p>优惠券</p>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="user-order">
      <div class="head">
        <div class="title">药品订单</div>
        <router-link class="arrow" to="/home">
          全部订单
          <cp-icon name="user-arrow"></cp-icon>
        </router-link>
      </div>
      <div class="item">
        <van-row>
          <van-col span="6">
            <p>
              <cp-icon name="user-paid"></cp-icon>
            </p>
            <p>待付款</p>
          </van-col>
          <van-col span="6">
            <p>
              <cp-icon name="user-shipped"></cp-icon>
            </p>
            <p>待发货</p>
          </van-col>
          <van-col span="6">
            <p>
              <cp-icon name="user-received"></cp-icon>
            </p>
            <p>待收货</p>
          </van-col>
          <van-col span="6">
            <p>
              <cp-icon name="user-finished"></cp-icon>
            </p>
            <p>已完成</p>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="user-shortcutKey">
      <p class="title">快捷工具</p>
      <div class="tools">
        <van-cell is-link>
          <template #title>
            <cp-icon name="user-tool-01"></cp-icon>
            <span class="custom-title">我的问诊</span>
          </template>
        </van-cell>
        <van-cell is-link>
          <template #title>
            <cp-icon name="user-tool-02"></cp-icon>
            <span class="custom-title">我的处方</span>
          </template>
        </van-cell>
        <van-cell is-link>
          <template #title>
            <cp-icon name="user-tool-03"></cp-icon>
            <span class="custom-title">家庭档案</span>
          </template>
        </van-cell>
        <van-cell is-link>
          <template #title>
            <cp-icon name="user-tool-04"></cp-icon>
            <span class="custom-title">地址管理</span>
          </template>
        </van-cell>
        <van-cell is-link>
          <template #title>
            <cp-icon name="user-tool-05"></cp-icon>
            <span class="custom-title">我的评价</span>
          </template>
        </van-cell>
        <van-cell is-link>
          <template #title>
            <cp-icon name="user-tool-06"></cp-icon>
            <span class="custom-title">官方客服</span>
          </template>
        </van-cell>
        <van-cell is-link>
          <template #title>
            <cp-icon name="user-tool-07"></cp-icon>
            <span class="custom-title">设置</span>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.users-page {
  background-color: var(--cp-bg);
  min-height: calc(100vh - 50px);
  .title {
    font-weight: var(--user-weight);
    font-size: var(--user-title);
  }
  .user-header {
    background-image: linear-gradient(
      180deg,
      rgba(44, 181, 165, 0.46),
      rgba(44, 181, 165, 0)
    );
    padding-top: 80px;
    .header-top {
      display: flex;
      align-items: center;
      margin-left: 15px;
      .user-name {
        margin-left: 10px;
        .name {
          margin-bottom: 10px;
          font-size: 20px;
          font-weight: 700;
        }
        .cp-icon {
          color: var(--cp-primary);
        }
      }
    }
    .header-bottom {
      text-align: center;
      margin-top: 14px;
      padding-bottom: 14px;
      .van-col p:first-child {
        font-weight: 500;
      }
      .van-col p:nth-child(2) {
        color: var(--cp-dark);
        font-size: 12px;
      }
    }
  }

  .user-order,
  .user-shortcutKey {
    margin-left: 15px;
    margin-right: 15px;
  }
  .user-order {
    background-color: var(--cp-card-bg);
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .arrow {
        color: var(--cp-dark);
        font-size: 14px;
        text-align: center;
        .cp-icon {
          font-size: 16px;
        }
      }
    }
    .item {
      margin-top: 15px;
      text-align: center;
      p:last-child {
        font-size: 12px;
      }
      .cp-icon {
        font-size: 27px;
      }
    }
  }
  .user-shortcutKey {
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    background-color: var(--cp-card-bg);
    margin-top: 10px;
    .title {
      margin-bottom: 10px;
    }
    .van-cell {
      vertical-align: middle;
      padding-left: 0;
      padding-right: 0;
      .custom-title {
        margin-left: 10px;
      }
    }
  }
}
</style>
